<!DOCTYPE html>
<html>
  <head>
    <title>Google Cloud</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link href="bootstrap2.3.2/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap2.3.2/css/bootstrap-responsive.css" rel="stylesheet">
    
	<style type="text/css">
	body{
		font-family: "微软雅黑","ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
		position: absolute;
		top:0px;
		left:0px;
		width: 100%;
		height: 100%;
		padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
	}
	.form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      
      
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: 25px;
        line-height: 25px;
      }
      
      .form-signin span[class="add-on"]{
      	height: 25px;
	    line-height: 25px;
	    padding: 4px 8px;
      }
      
      .input-append{
      	margin-left: 20px;
      	margin-right: 20px;
      }
      
      .login-layer{
      	margin-left: 20px;
      	margin-right: 27px;
      }
      
      .login-layer .btn{
      	width: 100%;
		padding: 4px 0px;
      }
      
      .logo-layer{
		margin-left: 20px;
      	margin-right: 20px;
      	text-align: center;
      }
      
      .logo-layer img{
        text-align: center;
      	margin-bottom: 10px;
      }
      
      .register-layer{
        text-align: center;
      	margin-top: 10px;
      }

      a:hover{
      	text-decoration: none;
      }
	</style>
  </head>
  
  <body>
    <div class="container" id="loginForm">
      <form class="form-signin">
      	<div class="logo-layer">
      	  <img src="resource/icon/hover/4-collections-cloud.png" /> Google Cloud
      	</div>
		<div class="input-append">
		  <input id="appendedInput" type="text" placeholder="账号">
		  <span class="add-on"><i class="icon-user"></i></span>
		</div>
		<div class="input-append">
		  <input id="appendedInput" type="text" placeholder="密码">
		  <span class="add-on"><i class="icon-lock"></i></span>
		</div>
		<div class="login-layer">
			<a class="btn" onclick="login()">登录</a>
		</div>
		<div class="register-layer">
			<a href="register.html">没有账号? 点击注册 <i class="icon-forward"></i></a>
		</div>
      </form>
	</div>
  </body>
  <script src="bootstrap2.3.2/js/jquery-1.7.2.min.js"></script>
  <script src="bootstrap2.3.2/js/bootstrap.js"></script>
  <script type="text/javascript">
  	// 屏幕分辨率 高度：window.screen.height
  	// 宽度：window.screen.width
  	/*
	var  s = "";
	s += "\r\n网页可见区域宽："+ document.body.clientWidth;
	s += "\r\n网页可见区域高："+ document.body.clientHeight;
	s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
	s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
	s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
	s += "\r\n网页正文全文高："+ document.body.scrollHeight;
	s += "\r\n网页被卷去的高："+ document.body.scrollTop;
	s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
	s += "\r\n网页正文部分上："+ window.screenTop;
	s += "\r\n网页正文部分左："+ window.screenLeft;
	s += "\r\n屏幕分辨率的高："+ window.screen.height;
	s += "\r\n屏幕分辨率的宽："+ window.screen.width;
	s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
	s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
	alert(s);
	*/
  	//var top_h = (document.body.clientHeight - $("#loginForm").height())/2;
  	//$("#loginForm").css("margin-top",top_h);
	
	function login(){
	  window.location.href = "index.html";
	}
  </script>
</html>
